<!-- 反馈页面 -->
<template>
  <div class="mail-feedback-page">
    <!-- 顶部导航 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="nav-left">
          <img
            src="@/assets/images/logo.png"
            alt="贵港文旅+"
            class="nav-logo"
          />
          <div class="brand-wrapper">
            <span class="brand-name">贵港文旅+</span>
            <span class="brand-pinyin">GUIGANGWENLV+</span>
          </div>
          <span class="divider">|</span>
          <span class="nav-title">你的专业文旅助手</span>
        </div>
        <div class="nav-right">
          <router-link to="/" class="nav-link">贵港文旅首页</router-link>
          <router-link to="/download/app" class="nav-link"
            >手机App下载</router-link
          >
          <router-link to="/download/desktop" class="nav-link"
            >电脑客户端下载</router-link
          >
          <router-link to="/merchant/apply" class="nav-link"
            >商家入驻</router-link
          >
          <router-link to="/help/guide" class="nav-link">帮助</router-link>
          <router-link to="/feedback" class="nav-link">反馈</router-link>
          <router-link to="/login" class="nav-link login-link"
            >去登录</router-link
          >
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="main-container">
      <div class="content-wrapper">
        <div class="page-header">
          <h1 class="page-title">问题反馈</h1>
          <p class="page-description">您的反馈是我们进步的动力</p>
        </div>

        <div class="feedback-form">
          <el-form ref="feedbackFormRef" :model="form" :rules="rules">
            <div class="form-group">
              <div class="feedback-types">
                <div
                  v-for="type in feedbackTypes"
                  :key="type.value"
                  class="type-item"
                  :class="{ active: form.type === type.value }"
                  @click="selectType(type.value)"
                >
                  <div class="type-icon">
                    <el-icon><component :is="type.icon" /></el-icon>
                  </div>
                  <span>{{ type.label }}</span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">问题标题</label>
              <el-input
                v-model="form.title"
                placeholder="请简要描述您遇到的问题"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Edit /></el-icon>
                </template>
              </el-input>
            </div>

            <div class="form-group">
              <label class="form-label">问题描述</label>
              <el-input
                v-model="form.content"
                type="textarea"
                :rows="6"
                placeholder="请详细描述您遇到的问题，以便我们更好地帮助您"
                class="form-textarea"
              />
            </div>

            <div class="form-group">
              <label class="form-label">上传截图（选填）</label>
              <el-upload
                v-model:file-list="fileList"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleFileChange"
                :on-remove="handleFileRemove"
                class="upload-section"
              >
                <div class="upload-content">
                  <el-icon class="upload-icon"><Plus /></el-icon>
                  <span class="upload-text">添加图片</span>
                </div>
              </el-upload>
              <div class="upload-tip">
                支持 jpg、png 格式，单张大小不超过 5MB，最多上传 4 张
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">联系方式</label>
              <el-input
                v-model="form.contact"
                :placeholder="
                  form.type === 'bug'
                    ? '请留下您的联系方式，方便我们及时反馈处理结果'
                    : '请留下您的联系方式（选填）'
                "
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </div>

            <div class="form-actions">
              <el-button class="cancel-btn" @click="$router.back()"
                >取消</el-button
              >
              <el-button
                type="primary"
                class="submit-btn"
                :loading="loading"
                @click="handleSubmit"
              >
                <el-icon><Check /></el-icon>
                提交反馈
              </el-button>
            </div>
          </el-form>
        </div>

        <div class="contact-info">
          <div class="contact-card">
            <div class="contact-icon">
              <el-icon><Phone /></el-icon>
            </div>
            <h3 class="contact-title">电话反馈</h3>
            <p class="contact-value">400-123-4567</p>
            <p class="contact-desc">工作时间：09:00 - 21:00</p>
          </div>

          <div class="contact-card">
            <div class="contact-icon">
              <el-icon><Message /></el-icon>
            </div>
            <h3 class="contact-title">邮件反馈</h3>
            <p class="contact-value">feedback@guigangwenlv.com</p>
            <p class="contact-desc">24小时受理</p>
          </div>

          <div class="contact-card cursor-pointer" @click="handleServiceClick">
            <div class="contact-icon">
              <el-icon><Service /></el-icon>
            </div>
            <h3 class="contact-title">在线客服</h3>
            <p class="contact-value">点击进入在线对话</p>
            <p class="contact-desc">在线时间：09:00 - 21:00</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="page-footer">
      <div class="footer-info">
        <span>贵港文旅版权所有 ©2024</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  Edit,
  Message,
  Phone,
  Service,
  Plus,
  Warning,
  Star,
  Promotion,
  QuestionFilled,
  Document,
  Loading,
  CircleCheck,
  Check,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";

const feedbackFormRef = ref(null);
const loading = ref(false);
const fileList = ref([]);

const router = useRouter();
const userStore = useUserStore();

const feedbackTypes = [
  { value: "bug", label: "功能异常", icon: "Warning" },
  { value: "suggestion", label: "功能建议", icon: "Star" },
  { value: "content", label: "内容纠错", icon: "Edit" },
  { value: "other", label: "其他问题", icon: "QuestionFilled" },
];

const form = reactive({
  type: "",
  title: "",
  content: "",
  images: [],
  contact: "",
});

const rules = {
  type: [{ required: true, message: "请选择反馈类型", trigger: "change" }],
  title: [
    { required: true, message: "请输入问题标题", trigger: "blur" },
    {
      min: 5,
      max: 50,
      message: "标题长度应在 5 到 50 个字符之间",
      trigger: "blur",
    },
  ],
  content: [
    { required: true, message: "请输入问题描述", trigger: "blur" },
    {
      min: 10,
      max: 500,
      message: "描述长度应在 10 到 500 个字符之间",
      trigger: "blur",
    },
  ],
  contact: [{ required: false, message: "请输入联系方式", trigger: "blur" }],
};

const selectType = (type) => {
  form.type = type;
};

const handleFileChange = (uploadFile) => {
  if (fileList.value.length > 4) {
    ElMessage.warning("最多只能上传 4 张图片");
    return false;
  }

  const isImage = uploadFile.raw.type.startsWith("image/");
  const isLt5M = uploadFile.raw.size / 1024 / 1024 < 5;

  if (!isImage) {
    ElMessage.error("只能上传图片文件！");
    return false;
  }
  if (!isLt5M) {
    ElMessage.error("图片大小不能超过 5MB！");
    return false;
  }

  // 生成预览图
  const reader = new FileReader();
  reader.readAsDataURL(uploadFile.raw);
  reader.onload = () => {
    uploadFile.url = reader.result;
  };

  form.images.push(uploadFile);
  return true;
};

const handleFileRemove = (uploadFile) => {
  const index = form.images.indexOf(uploadFile);
  if (index !== -1) {
    form.images.splice(index, 1);
  }
};

const handleSubmit = async () => {
  if (!feedbackFormRef.value) return;

  try {
    await feedbackFormRef.value.validate();

    loading.value = true;
    // TODO: 调用提交反馈API
    await new Promise((resolve) => setTimeout(resolve, 1500));

    ElMessage.success("感谢您的反馈！");
    // 重置表单
    feedbackFormRef.value.resetFields();
    fileList.value = [];
    form.images = [];
  } catch (error) {
    console.error("提交反馈失败:", error);
    ElMessage.error("提交失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

const handleServiceClick = () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning("请先登录后再使用在线客服");
    router.push("/login");
    return;
  }
  router.push("/service");
};
</script>

<style lang="scss" scoped>
.mail-feedback-page {
  @apply min-h-screen flex flex-col relative;
  background: url("@/assets/images/register-bg.jpg") center/cover fixed
    no-repeat;
  height: 100vh;
  overflow: hidden;

  &::before {
    content: "";
    @apply fixed inset-0 z-0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0) 64px,
      rgba(255, 255, 255, 0) calc(100% - 64px),
      rgba(255, 255, 255, 0.9) 100%
    );
    pointer-events: none;

    .dark & {
      background: linear-gradient(
        to bottom,
        rgba(17, 24, 39, 0.9) 0%,
        rgba(17, 24, 39, 0) 64px,
        rgba(17, 24, 39, 0) calc(100% - 64px),
        rgba(17, 24, 39, 0.9) 100%
      );
    }
  }

  .top-nav {
    @apply w-full fixed top-0 left-0 z-50;

    .nav-container {
      @apply max-w-7xl mx-auto h-16 flex items-center justify-between;
      padding-left: 16px;
      padding-right: 8px;

      .nav-left {
        @apply flex items-center;

        .nav-logo {
          @apply h-14 mr-2;
        }

        .brand-wrapper {
          @apply flex flex-col justify-center;

          .brand-name {
            @apply text-2xl font-bold text-gray-800 dark:text-white leading-6;
          }

          .brand-pinyin {
            @apply text-[8px] text-gray-500 dark:text-gray-400 mt-0.5;
          }
        }

        .divider {
          @apply mx-3 text-gray-300 dark:text-gray-600 text-xl;
        }

        .nav-title {
          @apply text-gray-700 dark:text-gray-300 text-lg font-medium;
        }
      }

      .nav-right {
        @apply flex items-center;
        gap: 24px;

        .nav-link {
          @apply text-sm text-gray-600 dark:text-gray-400 hover:text-[#2e74e5] dark:hover:text-[#60a5fa] transition-colors;
        }
      }
    }
  }

  .main-container {
    @apply flex-1 mt-16 mb-16 mx-auto w-full max-w-7xl;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    padding: 3rem;

    .dark & {
      background: rgba(31, 41, 55, 0.9);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .content-wrapper {
      @apply max-w-4xl mx-auto;

      .page-header {
        @apply text-center mb-12;

        .page-title {
          @apply text-4xl font-bold text-gray-900 dark:text-white mb-4;
          background: linear-gradient(to right, #2563eb, #3b82f6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          .dark & {
            background: linear-gradient(to right, #60a5fa, #93c5fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .page-description {
          @apply text-lg text-gray-600 dark:text-gray-400;
        }
      }

      .feedback-form {
        @apply bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg;

        .form-group {
          @apply mb-8;

          .feedback-types {
            @apply grid grid-cols-4 gap-4;

            .type-item {
              @apply flex flex-col items-center gap-2 p-4 rounded-xl border-2 border-gray-200 dark:border-gray-700
                     cursor-pointer transition-all duration-300;

              .type-icon {
                @apply w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center;

                .el-icon {
                  @apply text-2xl text-gray-400 dark:text-gray-500;
                }
              }

              span {
                @apply text-gray-600 dark:text-gray-400;
              }

              &:hover {
                @apply border-blue-200 dark:border-blue-700 shadow-sm;

                .type-icon {
                  @apply bg-blue-50 dark:bg-blue-900/50;

                  .el-icon {
                    @apply text-blue-500 dark:text-blue-400;
                  }
                }
              }

              &.active {
                @apply border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/30;

                .type-icon {
                  @apply bg-blue-100 dark:bg-blue-800;

                  .el-icon {
                    @apply text-blue-500 dark:text-blue-400;
                  }
                }

                span {
                  @apply text-blue-500 dark:text-blue-400;
                }
              }
            }
          }

          .form-label {
            @apply block text-lg font-medium text-gray-700 dark:text-gray-300 mb-3;
          }

          .form-input {
            :deep(.el-input__wrapper) {
              @apply px-4 py-2 text-base text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 
                     border border-gray-200 dark:border-gray-600 rounded-xl shadow-none;
              box-shadow: none !important;

              &.is-focus {
                @apply border-blue-500 dark:border-blue-400 ring-2 ring-blue-100 dark:ring-blue-900;
              }

              .el-input__prefix {
                @apply mr-2;

                .el-icon {
                  @apply text-gray-400 dark:text-gray-500;
                }
              }
            }
          }

          .form-textarea {
            :deep(.el-textarea__inner) {
              @apply px-4 py-3 text-base text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 
                     border border-gray-200 dark:border-gray-600 rounded-xl resize-none;
              min-height: 160px;

              &:focus {
                @apply border-blue-500 dark:border-blue-400 ring-2 ring-blue-100 dark:ring-blue-900;
              }
            }
          }

          .upload-section {
            :deep(.el-upload--picture-card) {
              @apply w-24 h-24 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600
                     hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300;

              .upload-content {
                @apply flex flex-col items-center justify-center;

                .upload-icon {
                  @apply text-3xl text-gray-400 dark:text-gray-500 mb-2;
                }

                .upload-text {
                  @apply text-sm text-gray-500 dark:text-gray-400;
                }
              }
            }

            :deep(.el-upload-list--picture-card) {
              .el-upload-list__item {
                @apply w-24 h-24 rounded-xl overflow-hidden;
              }
            }
          }

          .upload-tip {
            @apply text-sm text-gray-500 dark:text-gray-400 mt-2;
          }
        }

        .form-actions {
          @apply flex items-center justify-end gap-4 mt-12;

          .cancel-btn {
            @apply px-6 py-3 text-base font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700
                   rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200;
          }

          .submit-btn {
            @apply px-8 py-3 text-base font-medium text-white bg-blue-600 dark:bg-blue-500
                   rounded-xl hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200
                   flex items-center gap-2;

            .el-icon {
              @apply text-xl;
            }
          }
        }
      }

      .contact-info {
        @apply mt-12 grid grid-cols-3 gap-8;

        .contact-card {
          @apply bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg text-center transition-all duration-300;

          &:hover {
            @apply shadow-xl dark:shadow-2xl dark:shadow-gray-900/50;
            transform: translateY(-4px);
          }

          &[class*="cursor-pointer"] {
            @apply cursor-pointer;
          }

          .contact-icon {
            @apply w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center
                   mx-auto mb-4;

            .el-icon {
              @apply text-3xl text-blue-600 dark:text-blue-400;
            }
          }

          .contact-title {
            @apply text-lg font-semibold text-gray-900 dark:text-white mb-2;
          }

          .contact-value {
            @apply text-base text-gray-600 dark:text-gray-400 mb-1;
          }

          .contact-desc {
            @apply text-sm text-gray-500 dark:text-gray-500;
          }
        }
      }
    }
  }

  .page-footer {
    @apply w-full py-6 text-center fixed bottom-0 left-0 z-50;
    background: transparent;

    .footer-info {
      @apply text-sm text-gray-500 dark:text-gray-400;
    }
  }
}

@media (max-width: 1024px) {
  .main-container {
    @apply px-6;

    .content-wrapper {
      .page-header {
        @apply mb-8;

        .page-title {
          @apply text-3xl;
        }

        .page-description {
          @apply text-base;
        }
      }

      .feedback-form {
        @apply p-6;

        .form-group {
          @apply mb-6;

          .feedback-types {
            @apply grid-cols-2;
          }

          .form-label {
            @apply text-base mb-2;
          }
        }

        .form-actions {
          @apply mt-8;
        }
      }

      .contact-info {
        @apply grid-cols-1 gap-4;

        .contact-card {
          @apply flex items-center p-4;

          .contact-icon {
            @apply w-12 h-12 mb-0 mr-4;

            .el-icon {
              @apply text-2xl;
            }
          }

          .contact-content {
            @apply text-left flex-1;

            .contact-title {
              @apply text-base mb-1;
            }

            .contact-value {
              @apply text-sm mb-0;
            }

            .contact-desc {
              @apply text-xs;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 640px) {
  .main-container {
    @apply px-4 py-6;

    .content-wrapper {
      .page-header {
        @apply mb-6;

        .page-title {
          @apply text-2xl;
        }
      }

      .feedback-form {
        @apply p-4;

        .form-group {
          @apply mb-4;

          .feedback-types {
            @apply grid-cols-2 gap-2;

            .type-item {
              @apply p-3;

              .type-icon {
                @apply w-10 h-10;

                .el-icon {
                  @apply text-xl;
                }
              }

              span {
                @apply text-sm;
              }
            }
          }
        }

        .form-actions {
          @apply flex-col gap-2;

          .cancel-btn,
          .submit-btn {
            @apply w-full justify-center;
          }
        }
      }
    }
  }
}
</style>
